﻿@inherits BFieldComponentBase<TValue>
@typeparam TValue
@{
    string isDisabledClass = string.Empty;
    if (IsDisabled)
    {
        isDisabledClass = " is-disabled";
    }

    var text = Formatter(Value);
    var isClearable = Value != null && IsClearable && (IsFocus || IsMouseOver);
}
<div class="@wrapperClsBuilder" @ref="Content" style="@HtmlPropertyBuilder.CreateCssStyleBuilder().Add(Style).AddIf(!string.IsNullOrWhiteSpace(Image),$"background:url('{Image}') center center no-repeat")" @onclick="OnClick" @onmouseover="e => IsMouseOver = true" @onmouseout="e=>IsMouseOver=false">

    @if (!string.IsNullOrWhiteSpace(PrefixIcon))
    {
        <span class="el-input__prefix">
            <i class="el-input__icon @PrefixIcon" @onclick="OnPrefixIconClick"></i>
        </span>
    }
    else if (Prepend != null)
    {
        <div class="el-input-group__prepend">
            @Prepend
        </div>
    }
    @if (Type == InputType.Textarea)
    {
        <textarea style="@HtmlPropertyBuilder.CreateCssStyleBuilder().AddIf(!string.IsNullOrWhiteSpace(Image),"background: transparent;border: transparent;").Add("height: 66px;","padding: 5px 15px;","line-height: 1.5;","overflow-y: hidden; ").Add(InputStyle).ToString()" @ref="InputElement" @onclick="OnInputClick" placeholder="@Placeholder" value="@text" class="el-input__inner " @onfocus="e=>_=OnFocusAsync()" @onblur="e=>IsFocus=false" @oninput="OnChangeEventArgs" name="@Name" disabled="@IsDisabled" />
    }
    else
    {
        if (IsReadOnly)
        {
            <input type="@Type.ToString().ToLower()" style="@HtmlPropertyBuilder.CreateCssStyleBuilder().AddIf(!string.IsNullOrWhiteSpace(Image),"background: transparent;border: transparent;").Add(InputStyle).ToString()" @ref="InputElement" @onclick="OnInputClick" placeholder="@Placeholder" value="@text" class="el-input__inner " @onfocus="e=>_=OnFocusAsync()" @onblur="e=>IsFocus=false" @oninput="OnChangeEventArgs" name="@Name" disabled="@IsDisabled" readonly="readonly" autocomplete="off" />
        }
        else
        {
            <input type="@Type.ToString().ToLower()" style="@HtmlPropertyBuilder.CreateCssStyleBuilder().AddIf(!string.IsNullOrWhiteSpace(Image),"background: transparent;border: transparent;").Add(InputStyle).ToString()" @ref="InputElement" @onclick="OnInputClick" placeholder="@Placeholder" value="@text" class="el-input__inner " @onfocus="e=>_=OnFocusAsync()" @onblur="e=>IsFocus=false" @oninput="OnChangeEventArgs" name="@Name" disabled="@IsDisabled" autocomplete="off" />
        }

    }

    @if (isClearable)
    {
        <span class="el-input__suffix">
            <span class="el-input__suffix-inner">
                <!---->
                <i class="el-input__icon el-icon-circle-close @(AdditionalClearIcon ?? "el-input__clear")" @onclick="ClearOnClick">
                </i><!----><!---->
            </span><!---->
        </span>
    }
    else
    {
        @if (!string.IsNullOrWhiteSpace(SuffixIcon))
        {
            <span class="el-input__suffix">
                <span class="el-input__suffix-inner">
                    <!---->
                    <i class="el-input__icon @SuffixIcon" @onclick="OnSuffixIconClick">
                    </i><!----><!---->
                </span><!---->
            </span>
        }
    }
</div>